<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10- 路由嵌套和参数传递</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <!-- 使用router-link组件来定义导航，to属性指定链接url -->
        <router-link to="/home">主页</router-link>
        <router-link to="/user">新闻</router-link>
    </div>
    <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
        <!-- router-view用来显示路由内容 -->
        <router-view></router-view>
    </transition>
    <button @click="push">添加路由</button>
    <button @click="replace">替换路由</button>

</div>

<template id="user">
    <div>
        <h3>用户信息</h3>
        <ul>
            <router-link :to="{name:'login', params:{ name:'tom', pwd: '123'}}" tag="li">用户登陆</router-link>
            <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>


<script>
    // 1.定义组件
    let Home = {
        template: '<h3>我是主页</h3>'
    };
    let User = {
        template: '#user'
    };
    let Login = {
        //  <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
        // template:'<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'

        template: '<h4>用户登陆。。。获取参数：{{$route.params}},{{$route.path}}</h4>'
    };
    let Regist = {
        template: '<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'
    };

    // 2.配置路由
    const routes = [
        {path: '/home', component: Home, name: 'home'},
        {
            path: '/user', component: User,
            children: [
                {path: 'login', component: Login, name: "login"},
                {path: 'regist/:username/:password', component: Regist, name: 'regist'},
            ]
        },
        {path: '*', redirect: "/home"}, // 重定向
    ];

    // 3.创建路由实例
    const router = new VueRouter({
        // mode:'history', //更改模式
        routes, //简写，相当于routes:routes
        linkActiveClass: 'active ', //更新活动链接的class类名
    });

    // 4.创建根实例并将路由挂载到Vue实例上
    let vm = new Vue({ //父组件
        el: "#app",
        router, //注入路由
        methods: {
            push() {
                router.push({path: 'home'}); //添加路由，切换路由
            },
            replace() {
                router.replace({path: 'user'}); //替换路由，没有历史记录
            }

        }


    })
</script>
</body>
</html>